import { useState, useEffect } from 'react'
import './App.css'
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
} from 'chart.js'
import { PayPalScriptProvider } from '@paypal/react-paypal-js'
import { PAYPAL_SDK_SUBSCRIPTION_BASE_OPTIONS } from '../const/paypal.ts'

// Register ChartJS components
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, BarElement)

function App() {
  // State for theme (dark/light mode)
  const [darkMode, setDarkMode] = useState(false)

  // Effect to set default theme based on system preference
  useEffect(() => {
    // 检查是否首选深色模式
    const checkDarkMode = () => {
      if (
        localStorage.getItem('darkMode') === 'true' ||
        (localStorage.getItem('darkMode') === null && window.matchMedia('(prefers-color-scheme: dark)').matches)
      ) {
        setDarkMode(true)
        return true
      }
      return false
    }

    checkDarkMode()

    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    const handleChange = e => {
      if (localStorage.getItem('darkMode') === null) {
        setDarkMode(e.matches)
      }
    }

    darkModeMediaQuery.addEventListener('change', handleChange)
    return () => {
      darkModeMediaQuery.removeEventListener('change', handleChange)
    }
  }, [])

  return (
    <PayPalScriptProvider options={PAYPAL_SDK_SUBSCRIPTION_BASE_OPTIONS}>
      <div className={darkMode ? 'dark' : ''}>
        <div className="bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-100">
          <div className="iphone-container">
            {/* iOS 状态栏 */}
            <div className="ios-status-bar">
              <div className="time">9:41</div>
              <div className="status-icons">
                <i className="fas fa-signal"></i>
                <i className="fas fa-wifi"></i>
                <i className="fas fa-battery-full"></i>
              </div>
            </div>

            {/* 主内容区 */}
            <div className="app-content">
              <div className="h-full flex flex-col justify-between p-6">
                <div className="flex-1 flex flex-col items-center justify-center text-center">
                  <div className="w-24 h-24 rounded-full bg-blue-500 flex items-center justify-center mb-6 glow-animation">
                    <i className="fas fa-globe text-white text-4xl"></i>
                  </div>
                  <h1 className="text-3xl font-bold text-gray-800 dark:text-white mb-3">
                    Fluency Questionnaire Survey
                  </h1>
                  <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
                    获取专属于你的个性化学习计划，助你提升产品体验
                  </p>
                  <div className="info-box">
                    <p className="text-blue-800 dark:text-blue-300 font-medium flex items-center">
                      <i className="fas fa-clock mr-2"></i>
                      仅需3分钟完成测评
                    </p>
                  </div>
                  <a href="survey.html" className="btn-primary mt-8">
                    开始测评 <i className="fas fa-arrow-right ml-2"></i>
                  </a>
                </div>

                <div className="mt-8 text-center text-xs text-gray-500 dark:text-gray-400">
                  <p>
                    继续即表示您同意我们的
                    <a href="#" className="text-blue-500">
                      隐私政策
                    </a>
                    和
                    <a href="#" className="text-blue-500">
                      使用条款
                    </a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </PayPalScriptProvider>
  )
}

export default App
